<template>
  <div id="Trend">
    <div class="tre-body">
      <div class="tb-header">
        <h5>趋势图</h5>
      </div>
      <div class="tb-middle">
        <span>组织架构</span>
        <div class="block">
          <el-cascader :options="options" v-model="selectedOptions" @change="handleChange">
          </el-cascader>
        </div>
        <span>时间</span>
        <div class="block1">
          <el-date-picker v-model="time1" type="datetimerange" align="center" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['12:00:00', '08:00:00']">
          </el-date-picker>
        </div>
      </div>
      <div id="main" class="tb-footer"></div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        page: 66,
        time1: '',
        time2: '',
        options: [{
          value: 'huanan',
          label: '华南区',
          children: [{
            value: 'laochengqu',
            label: '老城区',
            children: [{
              value: 'A',
              label: 'A小区'
            }, {
              value: 'B',
              label: 'B小区'
            }, {
              value: 'C',
              label: 'C小区'
            }]
          }, {
            value: 'chengnanqu',
            label: '城南区',
            children: [{
              value: 'A',
              label: 'A小区'
            }, {
              value: 'B',
              label: 'B小区'
            }, {
              value: 'C',
              label: 'C小区'
            }]
          }, {
            value: 'chengbeiqu',
            label: '城北区',
            children: [{
              value: 'A',
              label: 'A小区'
            }, {
              value: 'B',
              label: 'B小区'
            }, {
              value: 'C',
              label: 'C小区'
            }]
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'PS',
            label: 'PS课程'
          }, {
            value: 'UI',
            label: 'UI设计'
          }, {
            value: 'java',
            label: 'java程序',
            children: [{
              value: 'jichu',
              label: '基础'
            }, {
              value: 'jinjie',
              label: '进阶'
            }]
          }]
        }],
        selectedOptions: []
      }
    },
    mounted() {
      this.initEchart(),
      this.bus.$on('toChangeData',function(testId){
      	console.log(testId);
      })
    },
    methods: {
      handleChange(value) {
        console.log(value);
      },
      //创建echarts数据
      initEchart() {
        let myChart = this.$echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        let option = {
          title: {
            text: '满意度'
          },
          tooltip: {
            formatter: '{b}:\n{c}%',
            trigger: 'axis' //标注
          },
          legend: {
            data: ['满意度']
          },
          xAxis: {
            data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
          },
          yAxis: {
            type: 'value',
            scale: true,
            axisLabel: {
              formatter: '{value}%'
            }
          },
          series: [{
            name: '满意度',
            type: 'line',
            data: [30, 50, 36, 10, 70, 20, 60, 46, 10, 70, 20, 66, 100]
          }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
    }
  }
</script>

<style scoped="scoped">
  #Trend {
    width: 99%;
    height: 81vh;
    border-top: none;
    position: relative;
    font-family: "微软雅黑";
  }
  .tre-body .tb-header h5 {
    padding: 10px 0 10px 30px;
    margin-top: 0;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: normal;
  }
  .tre-body .tb-middle {
    margin-top: -20px;
    margin-left: 30px;
    padding: 5px 0;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    position: relative;
  }
  .tre-body .tb-middle span {
    margin-right: 8px;
  }
  .tre-body .tb-middle .block {
    display: inline-block;
    margin-right: 30px;
  }
  .tre-body .tb-middle .block1 {
    display: inline-block;
  }
  .tre-body .tb-footer {
    height: 60vh;
  	width: 85vw;
  	overflow: auto;
  	margin-top: 20px;
  	padding: 0 26px;
  	box-sizing: border-box;
  }
</style>